<template>
  <div class="breadcrumbbox">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/homeview' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: item.path }" v-for="item in breadcrumbList" :key="item.title">{{ item.meta.title }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>
 
<script setup lang="ts">

// 面包屑导航功能
const route = useRoute()
const breadcrumbList = ref([])

const caleBreadcrumb = () => {
  breadcrumbList.value = route.matched.filter(
    (item) => item.meta && item.meta.title && item.path !== '/homeview'
  )
}

watch(
  () => route.path, // 也可以直接写 route ; 即  () => route.path  替换成 route
  () => {caleBreadcrumb()},
  {
    immediate: true
  }
)
</script>
 
<style lang="scss" scoped>
.el-breadcrumb{
  font-size: 18px;
}
</style>